<template>
  <div id="enrollment-list">
    <div class="weui_search_bar" :class="{'weui_search_focusing':isFocus}">
      <div class="weui_search_outer">
        <div class="weui_search_inner">
          <i class="ion ion-ios-search"></i>
          <input type="text" class="weui_search_input" id="search_input" placeholder="请输入活动标题" @blur="blur"
                 v-model="title">
          <a href="javascript:" class="ion ion-ios-close" id="search_clear"></a>
        </div>
        <label for="search_input" class="weui_search_text" id="search_text" @click="isFocus = true">
          <i class="ion ion-ios-search"></i>
          <span>搜一搜精彩活动吧</span>
        </label>
      </div>
      <a href="javascript:" class="weui_search_cancel">搜索</a>
    </div>
    <ul class="enrollment-items" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy"
        infinite-scroll-distance="30">
      <li v-for="item of enrollmentListInfo" @click=viewDetail(item.id)>
        <img :src="item.listPic" alt="活动图片">
        <div class="enrollment-text">
          <h3>{{item.title}}</h3>
          <p>
            <span class="enrollment-time">{{item.enrolStartDate}}开始报名</span>
            <span class="enrollment-num">{{item.alreadyRegistered}}人已报名</span>
          </p>
          <!--<div class="pub-header">
            <span>{{item.author}}</span>
            <img src="../../assets/images/head_img.jpg" alt="发布者头像">
          </div>-->
        </div>
      </li>
      <li class="no_data" v-if="!enrollmentListInfo.length">
        <i class="ion ion-ios-paper-outline"></i>
        <p>暂无数据</p>
      </li>
      
    </ul>
    <!--正在加载提示框-->
    <loading v-if="loadShow"></loading>
    <!--加载失败弹框-->
    <dialog-box :message="dialogMessage" v-if="dialogShow" @close-dialog="closeDialog" @cancle-dialog="closeDialog"></dialog-box>
   
  </div>
</template>
<script type="text/javascript">
  import '../../assets/css/enrollment.scss'
  import interfaceAPI from '../../assets/js/insterface.js';
  import http from '../../assets/js/http_mixin'
  import getQuery from '../../assets/js/get_querys'
  var entrollmentListUrl = interfaceAPI.entrollmentListUrl;
  export default {
    data() {
      return {
        isFocus: false,            // 搜索框是否处于选中状态，默认不选中
        title: '',                 // 搜索框的值
        pageTotle: '',             // 页面总数
        count: 0,                  // 计数，记录当前页面的值
        busy: false,
        noData: '暂无数据',
        enrollmentListInfo: []        // 活动列表信息
      }
    },
    mixins: [http, getQuery],
    mounted() {
      var query = this.getQuerys();
      this.personalId = query.empNo;
      this.search();
    },
    methods: {
      // 查看详情页
      viewDetail: function (id) {
        this.$router.push({path: 'enrollmentdetail', query: {id: id, empNo: this.personalId}})
      },
      loadMore() {
        this.busy = true;
        if (this.pageTotle > this.count && this.enrollmentListInfo.length > 0) {
          this.count++;
          this.search();
        }
      },

      // 查询方法
      search(){
        let params = {
          currentPage: this.count,
          pageSize: '10',
          title: this.title
        };
        this.getInfo({
          url: entrollmentListUrl,
          param: params,
          success: function (response) {
            if (response.body.resType === '00') {
              var responseData = response.body.data;
              this.pageTotle = response.body.pages;
              this.enrollmentListInfo = responseData;

              // for (var i = 0; i < responseData.length; i++) {
              //   this.enrollmentListInfo.push(responseData[i]);
              // }
              // this.count++;
            } else {
              this.noData = response.body.msg
            }
            this.title = '';     // 清空搜索框文字
          },
          fail: function (response) {
            this.dialogMessage = '请求失败，请稍后再试';
            this.dialogShow = true;   // 弹出提示信息
            this.title = '';     // 清空搜索框文字
          }
        })
      },
      blur(){
//          搜索框失焦事件
        this.isFocus = false;
        this.search();
      }
    }
  }
</script>
